<template>
  <div class="singerList">
    <div class="singerListTop" >
      <div class="singerListTopItem"><span class="iconfont icon-fanhuipt icona"
        @click="$router.go(-1)"></span>
        <!-- <p>歌手</p> -->
        </div>
        <h1>{{singerlist.artist.name}}</h1>
        <img :src="singerlist.artist.cover" alt="">
    </div>
    <div class="singerListBottom">
      <van-tabs v-model="active">
        <van-tab title="单曲" @change="active = 0" v-if="single">
            <div class="single" v-for="(item,index) in single" :key="item.id" @click="singerList(item.id)">
             <p>{{index+1}}</p>
             <div class="itemName" >
               <h4>{{singleName[index]}}</h4>
               <span v-for="value in item.ar" :key="value.id">{{value.name}} </span>
             </div>
            </div>
        </van-tab>
        <van-tab title="专辑" @change="active = 1">
            <router-link tag="div" class="album" v-for="(item,index) in album" :key="item.id" :to="'/singer/Album?id='+ item.id">
                <div class="albumImg">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="albumItem">
                  <h4>{{albumName[index]}}</h4>
                </div>
                
            </router-link>
        </van-tab>
        <van-tab title="视频" @change="active = 2">
          <div class="artistMv">
              <router-link tag="div" class="artistList" v-for="(item,index) in ArtistMv" :key="item.id" :to="'/singer/video?id='+ item.id">
                  <div class="artistItem">
                    <img :src="item.imgurl" alt="">
                  </div>
                  <h4>{{albumName[index]}}</h4>
                  <p>{{item.artistName}}</p>
              </router-link>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {getArtistDesc,getArtists,getArtistAlbum,getAlbum,getArtistMv} from "../../api/singer";
export default {
  data(){
      return {
        active:0,
        singerlist:"",
        single:[],//单曲
        album:[],//专辑
        albumName:[],//专辑名称
        albumSongs:[],//专辑歌曲
        albumSongsLength:[],//专辑歌曲数量
        ArtistMv:[],//视频详情
        ArtistMvName:[],//视频名字
        singleName:[],//单曲歌名字

      }
  },
  methods:{
    // artistMvs(id){
    //     console.log(id);

    // },
    //专辑音乐播放
    singerList(id){
        // console.log(id);
        this.$emit("singer-list", id);
    },
      getAlbumFun(){
        // console.log(this.album.length);
        let al = this.album.length;
        // console.log(this.album[al]);
        for(let i = 0; i < al; i++){
           getAlbum({id:this.album[i].id}).then((data)=>{
            //  console.log(data.songs.length);
             this.albumSongsLength.push(data.songs.length) 
             
           })
        }
      }
  },
created(){
  getArtistDesc({id:this.$route.query.id}).then(data=>{
    this.singerlist = data.data;
  })
    //单曲
  getArtists({id:this.$route.query.id}).then(data=>{
    // console.log(data.hotSongs);
    this.single = data.hotSongs
    data.hotSongs.forEach(item => {
      // console.log(item.name);
      this.singleName.push(item.name)
    });
  })
  //专辑
  getArtistAlbum({id:this.$route.query.id}).then(data=>{
    this.album = data.hotAlbums
      data.hotAlbums.forEach(item => {
       this.albumName.push(item.name)
      })

    // console.log(data.hotAlbums);
    //  console.log(this.album.length); 
    // this.getAlbumFun()
  })

  //视频
  getArtistMv({id:this.$route.query.id}).then(data=>{
    this.ArtistMv = data.mvs;
    data.mvs.forEach(item => {
       this.albumName.push(item.name)
      })
    // console.log(this.ArtistMv);
  })
 
  },
 
}
</script>

<style lang="less">
  .singerList{
    width: 100%;
    height: 100%;
      .singerListTop{
        width: 100%;
        height: 271px;
        position: relative;
        top: 0;
        left: 0;
        .singerListTopItem{
          position: absolute;
          top: 11px;
          left: 11px;
          
          display: flex;
          span{
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            background: rgba(0, 0, 0, .3);
            font-size: 18px;
            color: #fff;
            margin-right: 10px;
            border-radius: 50%;
          }
          p{
            font-size: 16px;
            color: #fff;
            // font-weight: 500;
          }
        }
        h1{
          position: absolute;
          bottom: 24px;
          left: 20px;
          color: #fff;
          font-size: 24px;

        }
       img{
         width: 100%;
         height: 100%;
       } 
      }

      .singerListBottom{
        width: 100%;
        position: relative;
        top: -8px;
        left: 0px;
        background-color: #fff;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        .van-tabs{
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          //单曲
          .single{
            width: 100%;
              height: 55px;
              border-bottom: 2px solid #dadbdc;
              display: flex;
              p{
                display: inline-block;
                width: 44px;
                height: 100%;
                font-size: 16px;
                line-height: 55px;
                text-align: center;
              }
              .itemName{
                width: 100% - 44px;
                height: 100%;
                h4{
                  font-size: 16px;
                  margin-top: 10px;
                  // margin-left: 44px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span{
                  font-size: 12px;
                  margin-top: 5px;
                  color: #7a7a7a;
                }
              }
          }
          //专辑
          .album{
            // width: 100%;
            height: 90px;
            // overflow: hidden;
            padding: 2px 8px 0px 2px;
            border-bottom: 2px solid #dadbdc;
            display: flex;
            .albumImg{
              width: 90px;
              height: 90px;
              border-radius: 4px;
              margin-right: 18px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .albumItem{
              width: 100% - 35px;
              height: 100%;
              // position: relative;
              h4{
                // height: 100%;
                margin-top: 35px;
                font-size: 16px;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

              }
              // p{
              //   font-size: 12px;
              //   margin-top: 5px;
              // }
              // .albumList{
              //   line-height: 16px;
              //   font-size: 12px;
              //   position: absolute;
              //   bottom: 8px;
              //   left: 0;
              // }
            }


          }
          //视频
          .artistMv{
            margin-top: 2px;
            width: 100%;
            height: 100%;
            display: flex;
            align-content: space-around;
            flex-wrap: wrap;
            justify-content: space-around;
            .artistList{
              width: 50% - 6px;
              height: 190px;
              margin:0 5px;
              .artistItem{
                height: 120px;
                border-radius: 8px;
                  img{
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                  }
              }
              h4{
                margin-top: 3px;
                font-size: 16px;
              }
              p{
                margin-top: 5px;
                font-size: 10px;
                color:  #7a7a7a;
              }
            }
          }

        }
      }
      
  }
</style>